<!--
 * @Author: ballistic kiss
 * @Date: 2021-07-17 09:51:15
 * @Desc: 
 * @LastEditors: ballistic kiss
 * @LastEditTime: 2021-07-17 13:54:16
 * @FilePath: \bilibili.htmlc:\Users\Master\Desktop\task\7-17 task\bili.html
 * @The signature: In the silent stars-这个男人不一般帅
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/bilibili.css">
</head>

<body>
    <div class="header">
        <div class="left-nav">左上角导航栏</div>
        <div class="right-nav">右上角导航栏</div>
        <div class="search-box"><input type="text" value="搜索框"></div>
        <div class="fixed">我是快捷导航</div>
    </div>
    <div class="wrap">
        <!-- 频道栏目 -->
        <div class="channel">
            <div class="left-channel">版心 / 频道栏 / 左栏</div>
            <div class="middle-channel">版心 / 频道栏 / 中间栏</div>
            <div class="right-channel">版心 / 频道栏 / 右栏</div>
        </div>
        <!-- 轮播图 -->
        <div class="slide">
            <div class="left-slide">左侧轮播图</div>
            <div class="right-slide">右侧轮播图</div>
        </div>
        <!-- 广告 -->
        <div class="banner">
            <span>广告</span><span>广告</span><span>广告</span><span>广告</span><span>广告</span><span>广告</span><span>广告</span>
        </div>
        <div class="big-banner">我是大金主</div>
        <!-- 动画区 -->
        <div class="q">动画</div>
        <div class="animation">
            <div class="animation-list">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="rank">
                <ul>
                    <li class="item1"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                    <li class="item9"></li>
                    <li class="item10"></li>
                </ul>
            </div>
        </div>
        <!-- 漫画区 -->
        <div class="q">漫画</div>
        <div class="animation">
            <div class="animation-list">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="rank">
                <ul>
                    <li class="item1"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                    <li class="item9"></li>
                    <li class="item10"></li>
                </ul>
            </div>
        </div>
        <!-- 国创区 -->
        <div class="q">国创</div>
        <div class="animation">
            <div class="animation-list">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="rank">
                <ul>
                    <li class="item1"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                    <li class="item9"></li>
                    <li class="item10"></li>
                </ul>
            </div>
        </div>
        <!-- 番剧区 -->
        <div class="q">番剧</div>
        <div class="animation">
            <div class="animation-list">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="rank">
                <ul>
                    <li class="item1"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                    <li class="item9"></li>
                    <li class="item10"></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>